<template>
    <Layout class-prefix="layout">
        <NumberPad :value.sync="record.amount" @submit="saveRecord"/>
        <Tabs :data-source="recordTypeList"
              :value.sync="record.type"/>
        <div class="notes">
            <FormItem field-name="备注"
                      placeholder="在这里输入备注"
                      :value.sync="record.notes"
            />
        </div>
        <Tags :value.sync="record.tags"/>
    </Layout>
</template>

<script lang="ts">
    import Vue from 'vue';  //从node_modules里面引入的 最好放在最上面
    import NumberPad from '@/components/Money/NumberPad.vue';
    import FormItem from '@/components/Money/FormItem.vue';
    import Tags from '@/components/Money/Tags.vue';
    import {Component} from 'vue-property-decorator';
    import Tabs from "@/components/Tabs.vue";
    import recordTypeList from "@/constant/recordTypeList";

    window.localStorage.setItem('version', '0.0.1');

    @Component({
        components: {Tabs, Tags, FormItem, NumberPad},
    })
    export default class Money extends Vue {
        get recordList(){
            return this.$store.state.recordList; //获取保存的数据
        }

        recordTypeList=recordTypeList;

        record: RecordItem = {
            tags: [], notes: '', type: '-', amount: 0
        }
        created(){
            this.$store.commit('fetchRecords')
        }
        onUpdateNotes(value: string) {
            this.record.notes = value;
        }
        saveRecord() {
            if(!this.record.tags||this.record.tags.length===0){
                return window.alert('请选择至少一个标签')
            }
            this.$store.commit('createRecord',this.record)
            if(this.$store.state.createRecordError===null){
                window.alert('已保存')
                this.record.notes=''
            }
        }
    }


</script>

<style lang="scss" scoped>
    ::v-deep .layout-content {
        display: flex;
        flex-direction: column-reverse;
    }
    .notes {
        padding: 12px 0;
    }
</style>
